<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        height: 950px;
        background-image: url("./jay.webp");
        background-size: 100%;

        .top {
          img {
            width: 100px;
            padding-top: 50px;
            padding-left: 43%;
            padding-right: 10px;
          }
          a {
            text-align: center;
            color: white;
            font-size: 50px;
          }
          p {
            color: white;
            padding-left: 45%;
            font-size: 20px;
          }
        }
        .one {
          width: 500px;
          height: 50px;

          margin: 0 auto;
          display: flex;
          div {
            width: 250px;
            height: 50px;
            text-align: center;
            font-size: 20px;
            color: white;
            background-color: rgb(100, 97, 97, 0.2);
          }
          div:hover {
            background-color: white;
            color: black;
          }
        }
        .body {
          display: flex;
          width: 500px;
          height: 270px;
          margin: 0 auto;
          background-color: white;
          .left {
            width: 50%;
            height: 100%;

            .two {
              width: 100%;
              height: 200px;
              background-color: white;
              margin-left: 10px;
              padding-top: 20px;

              a {
                margin-left: 10px;
              }
              input {
                width: 200px;
                margin-top: 20px;
                margin-left: 10px;
              }
              .add {
                text-align: center;
                width: 210px;
                height: 40px;
                background-color: #ccc;
                color: white;
                margin-top: 10px;
                line-height: 40px;
                border-radius: 10px;
                margin-left: 10px;
              }
            }
            .three {
              width: 100%;
              height: 50px;
              background-color: white;
              font-size: 15px;
              color: #ccc;
              margin-left: 10px;
              input {
                margin-left: 10px;
              }
            }
          }
          .middle {
            width: 20px;
            height: 270px;
            .x1 {
              margin-top: 30px;
            }
            div {
              height: 80px;
              width: 0px;
              border: solid #ccc 1px;
              margin-left: 8px;
            }
          }
          .right {
            width: 200px;
            height: 270px;
            margin-left: 30px;
            .ringht-box {
              a {
                text-decoration: none;
              }
            }
          }
        }
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="top">
        <img src="ht.webp" />
        <a>花田</a>
        <p>我们相遇的地方</p>
      </div>
      <div class="one">
        <div>登录</div>
        <div>注册</div>
      </div>
      <div class="body">
        <div class="left">
          <div class="two">
            <a style="color: rgb(174, 175, 176)">网易邮箱课直接登录开通</a>
            <br />

            <input
              placeholder="邮箱账号/邮箱地址/手机号码"
              style="height: 30px"
            /><br />
            <input placeholder="6-16位密码，区分大小写" style="height: 30px" />
            <br />
            <div class="add">登录</div>
          </div>
          <div class="x"></div>
          <!-- <div>
            <a>其他账号登录：</a>
          </div> -->
          <div class="three">
            <input type="checkbox" />十天内免登录|忘记密码?
          </div>
        </div>
        <div class="middle">
          <div class="x1"></div>
          <p style="color: #ccc">或</p>
          <div></div>
        </div>
        <div class="right">
          <div class="right-box">
            <p style="color: #ccc">其他账号登录：</p>
            <p href="#"><img src="./sjh.png" alt="" width="150px" /></p>
            <p href="#"><img src="./sjb.png" alt="" width="150px" /></p>
            <p href="#"><img src="./sjq.png" alt="" width="150px" /></p>
            <p href="#"><img src="./sjw.png" alt="" width="150px" /></p>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
